/* 日历组件的循环渲染使用了太多的循环可能会影响性能， 多半需要优化 */
/* 房间的日期现在全部安YYYY-MM-DD处理，没有加入时分秒 */

<template>
  <CalendarBase ref="calendar">
    <template v-slot:calendar-month-item="slotProps">
      <div class="hotel-calendar-item-wapper">
        <!-- 日期 -->
        <span
          class="day"
          :class="{ 'today': $dayjs(slotProps.date).format('YYYY-MM-DD') === $dayjs().format('YYYY-MM-DD') }">
          {{ slotProps.date | getDateFilter }}
        </span>
        <!-- 房间状态 -->
        <!-- 规则：房间状态只有当前 + 28天的范围，其它范围不能选择 -->
        <div v-if="isCanSelectCmp(slotProps.date)">
          <div class="room-status">
            <div class="title-mask">
              <span>{{ findDataByDateCmp(slotProps.date).forbidden | getRoomStatusFilter }}</span>
              <el-switch
                :width="30"
                v-model="findDataByDateCmp(slotProps.date).forbidden"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="0"
                :inactive-value="1"
                @change="status => setOnlyOneRoomStatus(status, slotProps.date)"
              />
            </div>
          </div>
        </div>
      </div>
    </template>
  </CalendarBase>
</template>

<script>
import CalendarBase from './CalendarBase'

export default {
  components: { CalendarBase },
  data () {
    return {
      productId: undefined,
      dayList: []
    }
  },
  filters: {
    getDateFilter (val) {
      const day = val.slice(-2)
      return parseInt(day)
    },
    getRoomStatusFilter (val) {
      if (val === undefined) return ''
      return val === 0 ? '有房' : '无房'
    }
  },
  computed: {
    // 是否在可选择的时间范围内 - 即当前天  ~ 当前天 + 27天
    isCanSelectCmp () {
      return date => {
        const today = this.$dayjs()
        const current = this.$dayjs(date)
        return current.isAfter(today.add(-1, 'day')) && current.isBefore(today.add(27, 'day'))
      }
    },
    // 从dayList数据集中查找指定日期的数据
    findDataByDateCmp () {
      return date => {
        const match = this.dayList.find(item => this.$dayjs(item.date).format('YYYY-MM-DD') === this.$dayjs(date).format('YYYY-MM-DD'))
        return match || {}
      }
    }
  },
  mounted () {
    this.$bus.on('hotel-calendar:open', this.open)
  },
  destroyed () {
    this.$bus.off('hotel-calendar:open')
  },
  methods: {
    open (id) {
      this.productId = id
      // 获取房间状态
      this.getRoomStatus()
      // open dialog
      this.$refs.calendar.open()
    },
    // 获取时间段内酒店房间状态
    getRoomStatus () {
      // 酒店日历状态有个限制， 只能查看和设置包括当前日期在内的28天范围
      this.$POST('/sot-admin-api/product/hotel/queryHotelCalendarList', {
        productId: this.productId,
        startUseDate: this.$dayjs().format('YYYY-MM-DD'),
        endUseDate: this.$dayjs().add(27, 'day').format('YYYY-MM-DD')
      }).then(({ data }) => (this.dayList = data.productDayLimitItemList))
    },
    // 设置某个日期内酒店房间状态
    setOnlyOneRoomStatus (status, date) {
      this.$POST('/sot-admin-api/product/hotel/setRoomStatus', {
        productId: this.productId,
        forbidden: status,
        useDate: date
      }).then(_ => {
        this.$swal.success('设置房间状态成功')
      })
    }
  }
}
</script>

<style lang="scss">
.hotel-calendar-item-wapper {
  position: relative;
  padding-top: 55px;

  .day {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: #6a6b6d;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
  }

  .today {
    color: #fff;
    background-color: #c63334;
    border-radius: 50%;
  }

  .room-status {
    margin: 5px 10px 0 10px;
    height: 30px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      height: 100%;
      width: 5px;
      border-radius: 1px;
      background-color: #0c9637;
    }

    .title-mask {
      padding: 0 10px;
      height: 100%;
      width: 100%;
      border-radius: 3px;
      background-color: rgba(158, 189, 165, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        color: #0c9637;
        font-size: 13px;
      }
    }
  }
}
</style>
